<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px"
              style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '4']"
               text-color='red'>
        <el-submenu :index='String(data.id)'
                    v-for='data in sidelist'
                    :key='data.id'>
          <template slot="title"><i class="el-icon-message"></i>{{data.title}}</template>
          <el-menu-item-group v-for='item in data.children'
                              :key='item.id'>
            <el-menu-item :index="String(item.id)">{{item.title}}</el-menu-item>

          </el-menu-item-group>

        </el-submenu>

      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting"
             style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date"
                           label="日期"
                           width="140">
          </el-table-column>
          <el-table-column prop="name"
                           label="姓名"
                           width="120">
          </el-table-column>
          <el-table-column prop="address"
                           label="地址">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>

</template>
<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

export default {
  data () {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      sidelist: [
        {
          id: 1,
          title: '用户管理',
          children: [
            {
              id: 2,
              title: '用户管理1',
            },
            {
              id: 3,
              title: '用户管理2',
            }
          ]
        },
        {
          id: 4,
          title: '用户管理3',
          children: [
            {
              id: 5,
              title: '用户管理4',
            },
            {
              id: 6,
              title: '用户管理5',
            }
          ]
        },
      ],



      tableData: Array(20).fill(item)
    }
  }

}
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>